<!--
 * @Author: wb_wangjiudeng wb_wangjiudeng@tcl.com
 * @Date: 2025-05-24 16:46:14
 * @LastEditors: wb_wangjiudeng wb_wangjiudeng@tcl.com
 * @LastEditTime: 2025-05-25 14:34:51
 * @FilePath: \iam-ui\iam-ui\src\components\echarts\pie1.vue
 * @Description: 文件介绍
 * 
 * Copyright (c) 2025 by user.email, All Rights Reserved. 
-->
<template>
  <div class="chart" ref="chartRef"></div>
</template>

<script setup>
import { ref, defineProps, watch, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";

const chartRef = ref(null);
let chartInstance = null;

const props = defineProps({
  color: {
    type: Array,
    default: () => [
      "#2396eb",
      "#4ecb73",
      "#fbd437",
      "#f04864",
      "#975fe5",
      "#36cbcb",
      "#f759ab",
    ],
  },
  seriesData: {
    type: Array,
    default: () => [],
  },
});

// 初始化
const initChart = () => {
  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value);
  }
  // 定义一个基础的、不包含动态数据的 option
  const option = {
    color: props.color,
    legend: {
      orient: "vertical",
      right: 50,
      top: "center",
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 20,
      textStyle: {
        rich: {
          name: { width: 120, fontSize: 14, color: "#333" },
          value: { width: 40, align: "right", fontSize: 14, color: "#333" },
          percent: { width: 40, align: "right", fontSize: 14, color: "#888" },
        },
      },
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["60%", "80%"],
        center: ["25%", "50%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            formatter: "{b}\n{d}%",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [], // 初始数据为空
      },
    ],
  };
  chartInstance.setOption(option, true);
};

// 监听 props.seriesData 变化
watch(
  () => props.seriesData,
  (newData) => {
    if (chartInstance && newData) {
      const total = newData.reduce((sum, item) => sum + (item.value || 0), 0);
      const legendFormatter = (name) => {
        const item = newData.find((i) => i.name === name);
        if (!item) return name;
        const percent = total > 0 ? Math.round((item.value / total) * 100) : 0;
        return `{name|${item.name}} |  {percent|${percent}%}  {value|${item.value}}`;
      };

      chartInstance.setOption({
        legend: {
          formatter: legendFormatter,
        },
        series: [
          {
            data: newData,
          },
        ],
      });
    }
  },
  { deep: true, immediate: true }
);

onMounted(() => {
  initChart();
  window.addEventListener("resize", resizeChart);
});

onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
  window.removeEventListener("resize", resizeChart);
});

function resizeChart() {
  if (chartInstance) {
    chartInstance.resize();
  }
}
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
